<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/mvc-demo08/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
    	  $.ajax({
    		   url:"/mvc-demo08/emp/loadDatas",
    		   type:"GET",
    		   dataType:"JSON",
    		   success:function(data){
    			   console.log(data);
    			   var depts = data.depts;
    			   var mgrs = data.mgrs;
    			   //刷新部门数据
    			   for(var i=0;i<depts.length;i++){
    				    var dept = depts[i];
    				   var $op = 
    				   $("<option value='"+dept.deptno+"'>"+dept.dname+"</option>");
    				   $("#dept-sel").append($op);
    			   }
    			   //刷新经理数据
    			   for(var i=0;i<mgrs.length;i++){
    				      var mgr = mgrs[i];
    				      var $op = 
    				      $("<option value='"+mgr.empno+"'>"+mgr.ename+"</option>");
    				      $("#mgr-sel").append($op);
    			   }
    		   },
    		   error:function(error){
    			    alert("获取数据失败");
    		   }
    		  
    		  
    	  });
    	  
    	  //添加员工
    	  $("#btn").on("click",function(){
    		   //表单验证
    		   //姓名 2~4个汉字
    		   var ename = $("form input[name=ename]").val();
    		   //ename
    		   ename = ename.trim();
    		   if(ename===""||ename==null){
    			   $("#ename-msg").html("姓名不能为空").css({"color":"red"});
    			   return;
    		   }
    		   //创建正则对象
    		   var reg = /^[\u4e00-\u9fa5]{0,}$/;
               if(!reg.test(ename)){
            	    //提示错误信息
            	    $("#ename-msg").html("合法姓名是2~4个汉字").css({"color":"red"});
            	    return;
               }
    		   //用户名验证通过
    		       $("#ename-msg").html("OK").css({"color":"green"});
    		   //合法年龄18~65
    		   var eage = $("form input[name=eage]").val();
    		   eage = eage.trim();//去掉左右的空格
    		   if(eage==="" || eage==null){
    			    $("#eage-msg").html("年龄不能为空").css({"color":"red"});
    			    return;
    		   }
               //年龄不能为非数字
                if(isNaN(eage)){
                	 $("#eage-msg").html("年龄不能非数字").css({"color":"red"});
     			      return;
                }
               if(eage<18 || eage>65){
            	   $("#eage-msg").html("合法年龄是18~65").css({"color":"red"});
  			      return;
               }
               $("#eage-msg").html("OK").css({"color":"green"});
               //合法薪资3000~5000
               var esalary = $("form input[name=esalary]").val();
               esalary = esalary.trim();
               if(esalary===""||esalary==null){
            	     $("#esalary-msg").html("薪资不能为空").css({"color":"red"});
            	      return;
               }
               if(isNaN(esalary)){
            	   $("#esalary-msg").html("薪资不能为非数字").css({"color":"red"});
         	         return;
               }
               
               if(esalary<3000 || esalary>50000){
            	 $("#esalary-msg").html("合法薪资3000~5000").css({"color":"red"});
       	         return;
               }
                         	   
    		   //全部验证通过，才能提交表单
    		  
    		   //提交表单
    		    $.ajax({
    		    	 url:"/mvc-demo08/emp",
    		    	 type:"POST",
    		    	 dataType:"TEXT",
    		    	 data:$("#addForm").serializeArray(),
    		         success:function(data){
    		        	   if(data==="OK"){
    		        		   location.href="/mvc-demo08/view/ListEmp.html";
    		        	   }
    		        	   
    		         },
    		         error:function(error){
    		        	  alert("添加数据失败...");
    		         }
    		    });
    	  });
    	  
    	
    });
</script>
</head>
<body>
 <form id="addForm">
    姓名:<input name="ename"/> 
      <span id="ename-msg"></span>
    <br/>
    性别:<label>
        <input type="radio" name="esex" value="男" checked/> 男
    </label>
     <label>
        <input type="radio" name="esex" value="女" /> 女
    </label> <br/>
    年龄:<input  name="eage"/> 
      <span id="eage-msg"></span>
    <br/>
    薪资:<input name="esalary"/>
     <span id="esalary-msg"></span>
     <br/>
    部门:<select name="dept.deptno"  id="dept-sel">      
    </select> <br/>
    经理: <select name="mgr.empno"  id="mgr-sel">       
    </select> <br/>
    <input type="button"  value="添加员工" id="btn"/>
 </form>
</body>
</html>